<div class="layui-fluid layui-layout-admin">
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
		<legend class="title"></legend>
	</fieldset>

	<form class="layui-form" action="">

		<div class="layui-form-item">
			<label class="layui-form-label">分类名称</label>
			<div class="layui-input-inline">
				<input type="text" name="title" autocomplete="off" placeholder="请输入分类名称" class="layui-input" value="">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">上级分类</label>
			<div class="layui-input-inline">
				<select name="pid">

				</select>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">分类图</label>
			<div class="layui-input-inline">
				<div class="layui-upload">
					<button type="button" class="layui-btn" id="category_btn">上传图片</button>
					<div class="layui-upload-list">
						<img class="category_image" id="category_image">
						<p id="demoText"></p>
					</div>
				</div>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">首页推荐</label>
			<div class="layui-input-block">
				<input type="checkbox" class="is_recommend" lay-filter="is_recommend" lay-skin="switch" lay-text="是|否">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">推荐背景图</label>
			<div class="layui-input-inline">
				<div class="layui-upload">
					<button type="button" class="layui-btn" id="recommend_image_btn">上传图片</button>
					<div class="layui-upload-list">
						<img class="recommend_image" id="recommend_image">
						<p id="recommendImageText"></p>
					</div>
				</div>
			</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-input-block">
				<div class="layui-footer">
					<input type="hidden" name="id" value="0" />
					<input type="hidden" name="image" value="" />
					<input type="hidden" name="is_recommend" value="" />
					<input type="hidden" name="recommend_image" value="" />
					<input type="hidden" name="list_table_name" value="category-list" />
					<button class="layui-btn" lay-submit lay-filter="LAY-send-submit">立即提交</button>
				</div>
			</div>
		</div>
	</form>
</div>

<script type="text/html" template lay-done="layui.data.sendParams(d.params)">
</script>

<script>
	layui.data.sendParams = function(params) {
		console.log(params);
		layui.use(['form', 'upload'], function() {
			let $ = layui.jquery,
				form = layui.form,
				upload = layui.upload,
				router = layui.router();

			let _index = layer.load();
			$(".layui-form").attr('action', layui.setter.API_HOST + 'admin/category/save')
			let _category_id = params.id | 0;
			$(".title").text((_category_id > 0 ? '编辑' : '添加') + '商品分类');

			if (_category_id) {
				layui.admin.req({
					url: layui.setter.API_HOST + 'admin/category/save',
					data: {
						id: _category_id
					},
					done: function(res) {
						layer.close(_index);
						if (res.code == 0) {
							$("input[name='title']").val(res.data.title);
							$("input[name='image']").val(res.data.image);
							$("input[name='recommend_image']").val(res.data.recommend_image);
							$("input[name='id']").val(res.data.id);
							$("input[name='is_recommend']").val(res.data.is_recommend);
							$(".category_image").attr('src', res.data.min_image);
							$(".recommend_image").attr('src', res.data.min_recommend_image);

							if (res.data.is_recommend == 1) {
								$(".is_recommend").prop('checked', true);
								form.render();
							}

							get_category_list(res.data.pid);
						} else {
							layer.msg('请求失败', {
								icon: 5
							})
						}
					}
				});
			} else {
				get_category_list(0);
			}

			form.on('switch(is_recommend)', function(data){
				$("input[name='is_recommend']").val(data.elem.checked ? 1 : 0);
			});


			function get_category_list(_pid) {
				layui.admin.req({
					url: layui.setter.API_HOST + 'admin/category/category_level_format',
					data: {
						id: _category_id
					},
					done: function(res) {
						layer.close(_index);
						if (res.code == 0) {
							let _html = [];
							_html.push('<option value="0">请选择</option>');
							$.each(res.data, function(i, d) {
								if (_pid == d.id) {
									_html.push('<option value="' + d.id +
										'" selected>' + d.html + d.title + '</option>');
								} else {
									_html.push('<option value="' + d.id + '">' + d.html + d
										.title + '</option>');
								}
							});
							$("select[name='pid']").html(_html.join(''));
							form.render();
						}
					}
				});
			}

			//普通图片上传
			var uploadInst = upload.render({
				elem: '#category_btn',
				headers: { //通过 request 头传递
					token: layui.data('layuiAdmin').token
				},
				url: layui.setter.API_HOST + 'admin/util/image_upload', //改成您自己的上传接口
				done: function(res) {
					//如果上传失败
					if (res.code > 0) {
						return layer.msg('上传失败');
					}
					//上传成功
					$(".category_image").attr('src', res.data.image);
					$("input[name='image']").val(res.data.path);
				},
				error: function() {
					//演示失败状态，并实现重传
					var demoText = $('#demoText');
					demoText.html(
						'<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>'
						);
					demoText.find('.demo-reload').on('click', function() {
						uploadInst.upload();
					});
				}
			});

			//普通图片上传
			var rUploadInst = upload.render({
				elem: '#recommend_image_btn',
				headers: { //通过 request 头传递
					token: layui.data('layuiAdmin').token
				},
				url: layui.setter.API_HOST + 'admin/util/image_upload', //改成您自己的上传接口
				done: function(res) {
					//如果上传失败
					if (res.code > 0) {
						return layer.msg('上传失败');
					}
					//上传成功
					$(".recommend_image").attr('src', res.data.image);
					$("input[name='recommend_image']").val(res.data.path);
				},
				error: function() {
					//演示失败状态，并实现重传
					var demoText = $('#recommendImageText');
					demoText.html(
							'<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>'
					);
					demoText.find('.demo-reload').on('click', function() {
						uploadInst.upload();
					});
				}
			});
		});
	}
</script>
